import React, { useEffect, useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import Home from './pages/child/Home';
import Worder from './pages/child/Worder';
import User from './pages/child/User';
import Cardword from './pages/child/Cardword';
import Cardout from './pages/child/Cardout';
import Carder from './pages/child/Carder';
import { Switch, Route, Redirect } from 'react-router-dom'
import { useDispatch } from 'react-redux';
import { async_getshoplist } from './store/ctmSlice';
const Admin = (props) => {
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch(async_getshoplist())
    }, [])
    const { Header, Sider, Content } = Layout;
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={[props.location.pathname]}
                    defaultOpenKeys={['/admin/carder', props.location.pathname]}
                    onSelect={(obj) => {
                        props.history.push(obj.key)
                    }}
                    items={[
                        {
                            key: '/admin/home',
                            icon: <UserOutlined />,
                            label: '首页',
                        },
                        {
                            key: '/admin/worder',
                            icon: <VideoCameraOutlined />,
                            label: '岗位管理',
                        },
                        {
                            key: '/admin/user',
                            icon: <UploadOutlined />,
                            label: '订单管理',
                        },
                        {
                            key: '/admin/carder',
                            icon: <UploadOutlined />,
                            label: '电子劵管理',
                            children: [
                                {
                                    key: '/admin/cardword',
                                    icon: <UploadOutlined />,
                                    label: '优惠劵制作',
                                },
                                {
                                    key: '/admin/cardout',
                                    icon: <UploadOutlined />,
                                    label: '已发布的优惠劵',
                                },
                            ]
                        },
                    ]}
                />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Switch>
                        <Route path="/admin/home" component={Home} />
                        <Route path="/admin/worder" component={Worder} />
                        <Route path="/admin/user" component={User} />
                        <Route path="/admin/carder" component={Carder} />
                        <Route path="/admin/cardword" component={Cardword} />
                        <Route path="/admin/cardout" component={Cardout} />
                        <Redirect from="/admin" to="/admin/home" />
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    );
};
export default Admin;

